
<template>
  <div class="page-wrapper">
    <!-- 1. 左侧导航：独立区域 -->
    <div class="page-sidebar">
        
        <div class="m_left">
        <div class="left_n">
            <RouterLink 
            :to="{name:'management'}">
                    管理中心
            </RouterLink>
                <!-- 管理中心 -->
        </div>

        <div class="left_m" v-if="type<2">
            <div class="left_m_t t_bg1">订单中心</div>
            <ul>
                <li >
                    <RouterLink 
                    :to="{name:'allOrder',query:{}}">
                        <span v-if="type==0">我的订单</span>
                        <span v-if="type==1">所有订单</span>
                    </RouterLink>
                </li>
            </ul>
        </div>
        <div class="left_m" v-if="type<2">
            <div class="left_m_t t_bg2">用户管理</div>
            <ul>
                <li>
                    <RouterLink 
                    :to="{name:'userInfo',query:{}}">
                    用户信息
                    </RouterLink>
                </li>
                <li v-if="type==1">
                    <RouterLink 
                        :to="{name:'userList',query:{}}">
                        用户列表
                    </RouterLink>                   
                </li>
                <li>
                    <RouterLink 
                        :to="{name:'collectProduct',query:{}}">
                        收藏夹
                    </RouterLink>
                </li>
                <li v-if="type==0">
                    <RouterLink 
                        :to="{name:'addressList',query:{}}">
                        地址列表
                    </RouterLink>
                </li>
                <li v-if="type==0">
                    <RouterLink 
                        :to="{name:'addAddress',query:{}}">
                        添加地址
                    </RouterLink>
                </li>
            </ul>
        </div>
        <div class="left_m" v-if="type==1">
            <div class="left_m_t t_bg3">商品管理</div>
            <ul>
                <li>
                    <RouterLink 
                    :to="{name:'categotyManage',query:{}}">
                    分类管理
                    </RouterLink>
                </li>
                <li>
                    <RouterLink 
                        :to="{name:'productManage',query:{}}">
                        商品管理
                    </RouterLink>
                </li>
                <li>
                    <RouterLink 
                        :to="{name:'addProduct',query:{}}">
                        商品上架
                    </RouterLink>
                </li>
            </ul>
        </div>
        <div class="left_m">
            <div class="left_m_t t_bg4">资讯中心</div>
            <ul>
                 <li>
                    <RouterLink 
                        :to="{name:'newsList',query:{}}">
                        资讯列表
                    </RouterLink>
                </li>
            </ul>
        </div>

   </div>
    </div>


    <div class="page-content">
        <RouterView></RouterView>
    </div>
    </div>
</template>


<script setup>
    import {ref,onMounted,onUnmounted} from 'vue'
    import {RouterView,RouterLink,useRouter} from 'vue-router'
    import store from '@/store'

    const router = useRouter()

    const type =  ref(2);

    const storedType = sessionStorage.getItem("type");//0,1
    if (storedType!=null) {
        type.value = storedType;
    }

     // 进入管理页面时隐藏HeaderView
    onMounted(() => {
        store.commit('setShowPage', 1)
    })
    
    // 离开管理页面时恢复HeaderView
    onUnmounted(() => {
        store.commit('setShowPage', 0)
    })

</script>

<style>
  .news-container {
  width: 50rem; 
  margin: 0 auto; 
  padding: 20px; 
  box-sizing: border-box; 
}

table {
  width: 100%;
  border-collapse: collapse; 
}

th, td {
  border: 1px solid #ddd;
  text-align: center; 
}
.page-wrapper {
  display: flex;
  min-height: 100vh; 
  background-color: #f5f5f5; 
}
.page-sidebar {
  width: 220px; /* 与NavLeft组件宽度保持一致，避免错位 */
  background-color: #fff;
  border-right: 1px solid #eee; /* 右侧边框分隔，视觉更清晰 */
  flex-shrink: 0; /* 固定宽度，不随页面缩放变化 */
}


.page-content {
  flex: 1; /* 占满剩余宽度 */
  padding: 24px;
  box-sizing: border-box;
  overflow-y: auto; /* 内容过多时滚动，不影响导航 */
}
</style>